<template>
  <Main>
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="委托事件" prop="title" >
        <el-input  placeholder="请输入事件名称" v-model="formInline.title"></el-input>
      </el-form-item>
      <el-form-item label="委托业务"  prop="business">
         <el-input  placeholder="请输入业务名称" v-model="formInline.business"></el-input>
      </el-form-item>
      <el-form-item label="委托开始时间" prop="start" >
        <el-date-picker name="start" v-model="formInline.start" type="datetime" placeholder="选择日期时间"></el-date-picker>
      </el-form-item>
      <el-form-item label="委托结束时间" prop="end">
        <el-date-picker v-model="formInline.end" type="datetime" placeholder="选择日期时间" ></el-date-picker>
      </el-form-item>
      <el-form-item label="委托人" prop="business">
         <el-input  placeholder="请输入委托人姓名" v-model="formInline.user"></el-input>
      </el-form-item>
      <el-form-item label="被委托人" prop="business">
         <el-input  placeholder="请输入被委托人姓名" v-model="formInline.userd"></el-input>
      </el-form-item>
        <el-form-item label="是否启用" prop="statuz">
        <el-select v-model="formInline.statuz" filterable placeholder="请选择" >
          <el-option
            v-for="item in data"
            :key="item.statuz"
            :label="item.statuz"
            :value="item.statuz"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="委托原因" prop="reason">
        <el-input  :rows="2" placeholder="请输入内容" v-model="formInline.reason"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="small" @click="fetch()">查询</el-button>
      </el-form-item>
    </el-form>
    <el-button type="primary" @click="add()" size="small" icon="el-icon-plus">新增</el-button>
    <el-table
      :data="tableData"
      style="width: 100%"
      row-key="kid"
      default-expand-all
      :empty-text="emptyText"
      @sort-change="sortChange"
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
    >
      <el-table-column fixed prop="title" label="委托事项" sortable="custom"></el-table-column>
        <el-table-column prop="business" label="委托业务" :formatter="formatBusiness"></el-table-column>
      <el-table-column prop="userName" label="委托人"></el-table-column>
      <el-table-column prop="userdName" label="被委托人"></el-table-column>
       <el-table-column prop="start" label="委托开始时间" width="160px" :formatter="formatStart"></el-table-column>
       <el-table-column prop="end" label="被委结束时间"  width="160px" :formatter="formatEnd"></el-table-column>
      <el-table-column prop="reason" label="委托原因"></el-table-column>
       <el-table-column prop="statuz" label="委托状态"></el-table-column>
        <el-table-column fixed="right" label="工作流操作" >
        <template slot-scope="scope">
          <el-button type="primary" size="small" @click="wkflow(scope.row.objectId)">
            <i class="el-icon-edit"></i>
          </el-button>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" >
        <template slot-scope="scope">
          <el-button type="primary" size="small" @click="edit(scope.row.objectId)">
            <i class="el-icon-edit"></i>
          </el-button>
          <el-button size="small" @click="del(scope.row.objectId)">
            <i class="el-icon-delete"></i>
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <page
      :page="formInline.page"
      :limit="formInline.limit"
      :total="formInline.total"
      @change="changePage"
    ></page>
    <Add ref="Add" @refresh="fetch"></Add>
    <Edit ref="Edit" @refresh="fetch"></Edit>
  </Main>
</template>

<script>
import Main from "@/components/basic-container/main";
import page from "@/components/basic-page/page";
import { activeUrl } from "@/config/env";
import Add from "./add";
import Edit from "./edit";

const urls = {
  delete: activeUrl + "/delegate/delegate/delete",
    define:activeUrl + "/activitDefineList",
  list: activeUrl + "/delegate/delegate/list"
};
export default {
  methods: {
    sortChange(column, prop, order) {
      this.formInline.sorter = {
        field: column.prop,
        order: column.order
      };
      this.fetch();
    },
    changePage(val) {
      this.formInline.page = val;
      this.fetch();
    },
    add: function() {
      this.$refs.Add.show();
    },
    edit: function(objectId) {
      this.$refs.Edit.show(objectId);
    },
    del: function(objectId) {
      this.$confirm("确认要删除该委托吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        axios.get(urls.delete, { params: { objectId: objectId } }).then(res => {
          this.$message(res.data.result);
          this.fetch();
        });
      });
    },
    fetch() {
      axios.get(urls.define).then(res => {
        this.businessData = res.data.result;
      });

      if(this.formInline.start) {
        this.formInline.start = new Date(this.formInline.start).getTime();
      }
      if(this.formInline.end) {
        this.formInline.end = new Date(this.formInline.end).getTime();
      }
      axios.post(urls.list, this.formInline).then(res => {
        const data = res.data.result;
        this.tableData = data.records;
        this.emptyText = "暂无数据"
        this.formInline.page = data.pageNumber;
        this.formInline.limit = data.pageSize;
        this.formInline.total = data.totalRow;
      });
    },
    dateChange(date){
      console.log(date)
    },
    formatDateByLong(l){
     var date = new Date(l);
     var pattern = "yyyy-MM-dd hh:mm:ss";
      return date.format(pattern);
    },
    formatBusiness(row,column){
      var arr = JSON.parse(row.business);
      var namearr = [];
      for(var i=0;i<arr.length;i++){
        namearr.push(arr[i].name);
      }
      return namearr.join(',');
    },
    formatStart(row, column){
      return this.formatDateByLong(row.start);
    },
    formatEnd(row, column){
      return this.formatDateByLong(row.end);
    },
  },
  mounted() {
    this.fetch();
  },
  data() {
    return {
      formInline: {
        name: null,
        limit: 10,
        page: 1,
        total: 0,
        sorter: {},
        statuz:'启用',
        business:null,
        user:null,
        userd:null,
        title:null,
        start:null,
        end:null,
        reason:null
      },
      data:[{statuz:"启用"},{statuz:"停用"}],
      businessData:[],
      tableData: [],
      emptyText : "加载中"
    };
  },
  components: {
    Add,
    Edit,
    Main,
    page
  }
};
</script>